<template>
  <div id="mailMainApp" class="home-stage">
    <div class="home-theme-bg">
      <div class="home-theme-bg-header"></div>

      <div class="home-theme-bg-body">
        <div class="home-theme-bg-sidebar"></div>
        <div class="home-theme-bg-route-content"></div>
        <div class="home-theme-bg-right"></div>
      </div>
    </div>

    <div class="home-theme-bg home-theme-bg-dark">
      <div class="home-theme-bg-header"></div>

      <div class="home-theme-bg-body">
        <div class="home-theme-bg-sidebar"></div>
        <div class="home-theme-bg-route-content"></div>
        <div class="home-theme-bg-right"></div>
      </div>
    </div>

    <div class="home-header-fixed">
      <div class="home-header">
        <div class="header-logo">
          <img
            class="header-logo-img"
            src="/src/assets/images/kkLogo.png"
            alt=""
          />
          <div class="header-logo-icon"></div>
        </div>

        <div class="mail-lazy-search-wrap is-placeholder">
          <div class="input-left-placeholder">
            <span
              class="xmail-ui-icon placeholder-icon"
              style="width: 20px; height: 20px"
            >
              <i>🔍</i>
            </span>
            <input
              class="placeholder-text"
              style="
                border: 0;
                background-color: var(--base_gray_005);
                color: #000;
              "
              type="text"
              v-model="searchQuery"
              placeholder="搜索邮件主题"
              @input="onSearch"
            />
            <!-- <span class="placeholder-text">搜索</span> -->
          </div>
        </div>

        <div class="header-right" @click="toggleLogoutMenu">
          <div class="xmail-cmp-profile-btn">
            <div class="xmail-ui-avatar ui-avatar-size32 ui-avatar-border">
              <img
                class="ui-avatar-img"
                src="https://thirdqq.qlogo.cn/ek_qqapp/AQAUtQF6ibEV7RSB2jqwZzHPqb93yIBiaXmLWopwV4xEjGetnx3TRAPlJ4b420dkBYnYQ6Oianh/0"
                alt=""
              />
            </div>

            <div class="profile-user-info">
              <span class="user-nick">{{ userInfo.user_nick }}</span>
              <span class="user-email">
                {{ userInfo.phone_number }}@kk.com
              </span>
            </div>
            <span
              class="xmail-ui-icon down-icon"
              style="width: 6px; height: 6px"
            >
              <i style="width: 6px; height: 6px; position: absolute; top: 37px"
                >^</i
              >
            </span>
          </div>
          <div class="home-header-setting-btn">
            <span class="xmail-ui-icon" style="width: 24px; height: 24px">
              <i style="height: 24px; width: 24px">⚙️</i>
            </span>
          </div>
        </div>
        <!-- 新增的退出登录弹出框 -->
        <div v-if="isLogoutMenuVisible" class="logout-menu">
          <div class="logout-item" @click="logout">退出登录</div>
        </div>
      </div>
    </div>

    <div class="home-body">
      <div class="home-sidebar-fixed">
        <div class="home-sidebar home-sidebar-compact">
          <div class="sidebar-header">
            <div
              class="home-sidebar-compose-btn"
              @click="handleWriteLetterClick"
            >
              <span
                class="xmail-ui-icon compose-btn-icon-default"
                style="width: 20px; height: 20px"
              >
                <i>✍</i>
              </span>

              <!-- <span class="xmail-ui-icon compose-btn-icon-other" style="width: 20px; height: 20px;">

          </span> -->

              <div class="compose-btn-text">写信</div>
            </div>
          </div>

          <div class="xmail-ui-float-scroll">
            <div class="ui-float-scroll-body sidebar-menus" tabindex="0">
              <div
                class="home-sidebar-draft-list"
                style="height: 0px; opacity: 0"
              ></div>

              <div
                class="home-sidebar-menu"
                style="height: 40px"
                v-for="(item, index) in navItems"
                :key="index"
                @click="handleClick(item)"
              >
                <template v-if="item.label === '我的文件夹'">
                  <span
                    class="xmail-ui-icon sidebar-menu-icon"
                    style="width: 20px; height: 20px"
                  >
                    <i>{{ item.icon }}</i>
                  </span>
                  <div class="sidebar-menu-content">
                    <div class="sidebar-menu-text">
                      {{ item.label }}
                    </div>
                    <!-- 根据展开状态决定是否显示“邮件订阅” -->
                    <div v-if="item.isExpanded" class="sub-menu-item">
                      <span
                        class="xmail-ui-icon sidebar-menu-icon"
                        style="width: 20px; height: 20px"
                      >
                        <i>📬</i>
                      </span>
                      <div class="sidebar-menu-content">
                        <div class="sidebar-menu-text">邮件订阅</div>
                      </div>
                    </div>
                  </div>
                </template>
                <!-- 其他项正常显示 -->
                <template v-else>
                  <span
                    class="xmail-ui-icon sidebar-menu-icon"
                    style="width: 20px; height: 20px"
                  >
                    <i>{{ item.icon }}</i>
                  </span>
                  <div class="sidebar-menu-content">
                    <div @click="handleClick(item)" class="sidebar-menu-text">
                      {{ item.label }}
                    </div>
                  </div>
                </template>
              </div>

              <div class="sidebar-feature-title">应用功能</div>

              <div
                class="home-sidebar-menu"
                style="height: 40px"
                v-for="(item, index) in navFunctions"
                :key="index"
                @click="FunctionClick(item)"
              >
                <span
                  class="xmail-ui-icon sidebar-menu-icon"
                  style="width: 20px; height: 20px"
                >
                  <i>{{ item.icon }}</i>
                </span>
                <div class="sidebar-menu-content">
                  <div @click="FunctionClick(item)" class="sidebar-menu-text">
                    {{ item.label }}
                  </div>
                </div>
              </div>
            </div>

            <div
              class="xmail-ui-float-scroll-bar ui-float-scroll-bar-vertical ui-float-scroll-bar-disabled"
            ></div>
          </div>
        </div>
      </div>

      <div class="home-middle">
        <div class="home-route-content">
          <div class="mail_app" style="display: block">
            <component
              v-if="showComponentA"
              :is="currentComponent"
              @click="toggleComponents('A')"
            ></component>
            <component
              v-if="showComponentB"
              :is="functionComponent"
              @click="toggleComponents('B')"
            ></component>
            <component
              v-if="showComponentC"
              :is="writeLetterComponent"
              @click="toggleComponents('C')"
            ></component>
          </div>
          <div class="vue2_app" style="display: none"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// 这里可以添加左侧菜单展开收起等交互逻辑
import { computed, defineComponent, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useEventBus } from "@vueuse/core";
import axios from "axios";
import Inbox from "./Inbox.vue";
import Starred from "./Starred.vue";
import Draft from "./Draft.vue";
import Send from "./Send.vue";
import Trashbin from "./Trashbin.vue";
import Delete from "./Delete.vue";
import Myfolds from "./Myfolds.vue";
import Theme from "./Theme.vue";
import Calendar from "./Calendar.vue";
import Relax from "./Relax.vue";
import YueRead from "./yueRead.vue";
import Contacts from "./Contacts.vue";
import Resume from "./Resume.vue";
import Notebook from "./Notebook.vue";
import Settings from "./Settings.vue";
import WriteLetters from "./WriteLetters.vue";
import About from "./About.vue";
import Connected from "./Connected.vue";

export interface NavItem {
  label: string;
  icon: string;
  // 可以根据需要添加更多属性，比如对应的组件名、路由等
  component: any;
  isExpanded?: boolean;
}
export interface NavFunction {
  label: string;
  icon: string;
  component: any;
  isExpanded?: boolean;
}

export interface WriteLetters {
  label: string;
  icon: string;
  component: any;
  isExpanded?: boolean;
}

// 定义 UserInfo 类型
interface UserInfo {
  phone_number?: string;
  passwaor?: string;
  user_nick?: string;
  // 可以根据实际情况添加更多属性
}

const { emit, on } = useEventBus<string>("search-mail");

export default defineComponent({
  setup() {
    // 定义响应式变量存储用户信息
    const userInfo = ref<UserInfo>({});

    const searchQuery = ref<string>("");
    const router = useRouter();
    const isLogoutMenuVisible = ref(false);

    // 切换退出登录菜单的显示隐藏
    const toggleLogoutMenu = () => {
      isLogoutMenuVisible.value = !isLogoutMenuVisible.value;
    };

    // 退出登录方法
    const logout = () => {
      // 清除本地存储的用户信息
      localStorage.removeItem("userInfo");
      // 跳转到登录页面
      router.push("/");
    };
    const onSearch = () => {
      emit(searchQuery.value);
    };

    onMounted(() => {
      // 从本地存储中获取用户信息
      const storedUserInfo = localStorage.getItem("userInfo");
      if (storedUserInfo) {
        userInfo.value = JSON.parse(storedUserInfo) as UserInfo;
        console.log("User Info:", userInfo.value);
      }
    });
    //定义一个响应式变量来存储当前选中的功能名字
    const currentSelectedLabel = ref("");
    const currentFunctionLabel = ref("");
    const currentWriteLetterLabel = ref("");
    //当前的组件内容
    const currentComponent = ref<typeof Inbox | typeof Starred | null>(Inbox);
    const functionComponent = ref<typeof Theme | typeof Calendar | null>(Theme);
    const writeLetterComponent = ref<typeof WriteLetters | null>(null);
    //用于控制组件是否显示的状态变量，初始为true
    const showComponentA = ref(true);
    const showComponentB = ref(false);
    const showComponentC = ref(false);
    //navItems保留左侧导航栏中的内容
    const navItems: NavItem[] = [
      { label: "收件箱", icon: "✉", component: Inbox },
      { label: "星标邮件", icon: "⭐", component: Starred },
      { label: "已发送", icon: "✈", component: Send },
      // { label: "草稿箱", icon: "📃", component: Draft },
      { label: "已删除", icon: "❎", component: Delete },
      { label: "垃圾箱", icon: "🚮", component: Trashbin },

      // {
      //   label: "我的文件夹",
      //   icon: "📂",
      //   component: Myfolds,
      //   isExpanded: false, // 初始状态为收起
      // },
    ];
    //navFunctions保留左侧导航栏中的内容
    const navFunctions: NavFunction[] = [
      // { label: "主题切换", icon: "☁", component: Theme },
      { label: "日历", icon: "📅", component: Calendar },
      { label: "记事本", icon: "📕", component: Notebook },
      { label: "轻松一刻", icon: "✨", component: Relax },
      { label: "悦读", icon: "📚", component: YueRead },
      // { label: "通讯录", icon: "📱", component: Contacts },
      // { label: "简历", icon: "𝓹", component: Resume },
      { label: "通用设置", icon: "⚙️", component: Settings },
      { label: "关于我们", icon: "Ⓐ", component: About },
      { label: "联系我们", icon: "Ⓒ", component: Connected },
    ];

    // 定义写邮件的导航项
    const writeLetters: WriteLetters[] = [
      { label: "写邮件", icon: "✍", component: WriteLetters },
    ];

    //切换“我的文件夹”展开/收起状态的方法
    const toggleFolder = (item: NavItem) => {
      if (item.label === "我的文件夹") {
        item.isExpanded = !item.isExpanded;
      }
    };

    //左侧导航栏点击事件
    const handleClick = (item: NavItem) => {
      currentComponent.value = item.component;
      currentSelectedLabel.value = item.label;
      showComponentA.value = true;
      showComponentB.value = false;
    };
    //左侧功能栏点击事件
    const FunctionClick = (item: NavFunction) => {
      functionComponent.value = item.component;
      currentFunctionLabel.value = item.label;
      showComponentB.value = true;
      showComponentA.value = false;
    };

    // 写邮件点击事件
    const handleWriteLetterClick = () => {
      const item = writeLetters[0];
      writeLetterComponent.value = item.component;
      currentWriteLetterLabel.value = item.label;
      showComponentC.value = true;
      showComponentA.value = false;
      showComponentB.value = false;
    };
    const toggleComponents = (clickedComponent: string) => {
      if (clickedComponent === "A") {
        showComponentA.value = true;
        showComponentB.value = false;
        showComponentC.value = false;
      } else if (clickedComponent === "B") {
        showComponentB.value = true;
        showComponentA.value = false;
        showComponentC.value = false;
      } else if (clickedComponent === "C") {
        showComponentC.value = true;
        showComponentA.value = false;
        showComponentB.value = false;
      }
    };

    return {
      navItems,
      navFunctions,
      writeLetters,
      userInfo,
      currentSelectedLabel,
      currentFunctionLabel,
      currentWriteLetterLabel,
      currentComponent,
      functionComponent,
      writeLetterComponent,
      showComponentA,
      showComponentB,
      showComponentC,
      toggleFolder,
      handleClick,
      FunctionClick,
      handleWriteLetterClick,
      toggleComponents,
      searchQuery,
      onSearch,
      toggleLogoutMenu,
      logout,
      isLogoutMenuVisible,
    };
  },
});
</script>

<style scoped>
:global(:root) {
  --base_black: #000000;
  --base_gray_003: rgba(19, 46, 64, 0.03);
  --base_gray_005: rgba(20, 46, 77, 0.05);
  --base_gray_007: rgba(21, 46, 74, 0.07);
  --base_gray_010: rgba(22, 46, 74, 0.1);
  --base_gray_015: rgba(23, 46, 71, 0.15);
  --base_gray_020: rgba(23, 45, 69, 0.2);
  --base_gray_025: rgba(24, 44, 66, 0.25);
  --base_gray_030: rgba(24, 43, 64, 0.3);
  --base_gray_040: rgba(25, 41, 59, 0.4);
  --base_gray_050: rgba(25, 38, 54, 0.5);
  --base_gray_060: rgba(24, 36, 48, 0.6);
  --base_gray_070: rgba(23, 33, 43, 0.7);
  --base_gray_080: rgba(22, 30, 38, 0.8);
  --base_gray_090: rgba(21, 26, 33, 0.9);
  --base_gray_100: #13181d;
  --base_white_003: rgba(255, 255, 255, 0.03);
  --base_white_005: rgba(255, 255, 255, 0.05);
  --base_white_007: rgba(255, 255, 255, 0.07);
  --base_white_010: rgba(255, 255, 255, 0.1);
  --base_white_015: rgba(255, 255, 255, 0.15);
  --base_white_020: rgba(255, 255, 255, 0.2);
  --base_white_025: rgba(255, 255, 255, 0.25);
  --base_white_030: rgba(255, 255, 255, 0.3);
  --base_white_040: rgba(255, 255, 255, 0.4);
  --base_white_050: rgba(255, 255, 255, 0.5);
  --base_white_060: rgba(255, 255, 255, 0.6);
  --base_white_070: rgba(255, 255, 255, 0.7);
  --base_white_080: rgba(255, 255, 255, 0.8);
  --base_white_090: rgba(255, 255, 255, 0.9);
  --base_white_100: #ffffff;
  --accent_blue: #0f7af5;
  --accent_blue_darken_1: #0e70df;
  --accent_blue_darken_2: #0e66cb;
  --accent_blue_darken_3: #0e5cb5;
  --accent_blue_darken_4: #0f52a0;
  --accent_blue_darken_5: #0f498b;
  --accent_blue_lighten_1: #328df6;
  --accent_blue_lighten_2: #57a2f8;
  --accent_blue_lighten_3: #7cb7fa;
  --accent_blue_lighten_3l: #92c2fa;
  --accent_blue_lighten_4: #a8cffb;
  --accent_blue_lighten_4l: #c0dcfc;
  --accent_blue_lighten_5: #daebfd;
  --chrome_red: #f73116;
  --chrome_red_darken_1: #df2e16;
  --chrome_red_darken_2: #c82b16;
  --chrome_red_darken_3: #b02916;
  --chrome_red_darken_4: #9a2616;
  --chrome_red_darken_5: #832416;
  --chrome_red_lighten_1: #f84f38;
  --chrome_red_lighten_2: #f96e5b;
  --chrome_red_lighten_3: #fb8f80;
  --chrome_red_lighten_3l: #fba195;
  --chrome_red_lighten_4: #fcb5ab;
  --chrome_red_lighten_4l: #fdc9c2;
  --chrome_red_lighten_5: #fedfdb;
  --chrome_orange: #ff8800;
  --chrome_orange_darken_1: #e67c00;
  --chrome_orange_darken_2: #ce7100;
  --chrome_orange_darken_3: #b66600;
  --chrome_orange_darken_4: #9f5b00;
  --chrome_orange_darken_5: #875000;
  --chrome_orange_lighten_1: #ff9925;
  --chrome_orange_lighten_2: #ffab4c;
  --chrome_orange_lighten_3: #ffbe74;
  --chrome_orange_lighten_3l: #ffc98b;
  --chrome_orange_lighten_4: #ffd4a3;
  --chrome_orange_lighten_4l: #ffe0bc;
  --chrome_orange_lighten_5: #ffedd8;
  --chrome_yellow: #f7c200;
  --chrome_yellow_darken_1: #dfb000;
  --chrome_yellow_darken_2: #c89f00;
  --chrome_yellow_darken_3: #b08e00;
  --chrome_yellow_darken_4: #9a7d00;
  --chrome_yellow_darken_5: #836d00;
  --chrome_yellow_lighten_1: #f8cb25;
  --chrome_yellow_lighten_2: #f9d44c;
  --chrome_yellow_lighten_3: #fbde74;
  --chrome_yellow_lighten_3l: #fbe38b;
  --chrome_yellow_lighten_4: #fce9a3;
  --chrome_yellow_lighten_4l: #fdefbc;
  --chrome_yellow_lighten_5: #fef6d8;
  --chrome_green: #07ab28;
  --chrome_green_darken_1: #079c27;
  --chrome_green_darken_2: #078d27;
  --chrome_green_darken_3: #077e26;
  --chrome_green_darken_4: #077025;
  --chrome_green_darken_5: #076125;
  --chrome_green_lighten_1: #2bb747;
  --chrome_green_lighten_2: #51c468;
  --chrome_green_lighten_3: #78d18a;
  --chrome_green_lighten_3l: #8ed99d;
  --chrome_green_lighten_4: #a6e1b1;
  --chrome_green_lighten_4l: #bee9c7;
  --chrome_green_lighten_5: #d9f2de;
  --chrome_cyan: #00b1f7;
  --chrome_cyan_darken_1: #00a1e1;
  --chrome_cyan_darken_2: #0092cd;
  --chrome_cyan_darken_3: #0083b6;
  --chrome_cyan_darken_4: #0073a1;
  --chrome_cyan_darken_5: #00648c;
  --chrome_cyan_lighten_1: #25bcf8;
  --chrome_cyan_lighten_2: #4cc8f9;
  --chrome_cyan_lighten_3: #74d4fb;
  --chrome_cyan_lighten_3l: #8bdcfb;
  --chrome_cyan_lighten_4: #a3e3fc;
  --chrome_cyan_lighten_4l: #bcebfd;
  --chrome_cyan_lighten_5: #d8f3fe;
  --chrome_purple: #7c16f7;
  --chrome_purple_darken_1: #7016e1;
  --chrome_purple_darken_2: #6516cd;
  --chrome_purple_darken_3: #5b16b6;
  --chrome_purple_darken_4: #5016a1;
  --chrome_purple_darken_5: #46168c;
  --chrome_purple_lighten_1: #8f38f8;
  --chrome_purple_lighten_2: #a35bf9;
  --chrome_purple_lighten_3: #b880fb;
  --chrome_purple_lighten_3l: #c395fb;
  --chrome_purple_lighten_4: #d0abfc;
  --chrome_purple_lighten_4l: #ddc2fd;
  --chrome_purple_lighten_5: #ebdbfe;
  --chrome_pink: #eb387d;
  --chrome_pink_darken_1: #d43473;
  --chrome_pink_darken_2: #be316b;
  --chrome_pink_darken_3: #a82e61;
  --chrome_pink_darken_4: #932b58;
  --chrome_pink_darken_5: #7d284f;
  --chrome_pink_lighten_1: #ee5590;
  --chrome_pink_lighten_2: #f173a4;
  --chrome_pink_lighten_3: #f493b8;
  --chrome_pink_lighten_3l: #f6a4c4;
  --chrome_pink_lighten_4: #f8b7d0;
  --chrome_pink_lighten_4l: #facbdd;
  --chrome_pink_lighten_5: #fce1eb;
  --accent_blue_alpha_005: rgba(15, 122, 245, 0.05);
  --accent_blue_alpha_010: rgba(15, 122, 245, 0.1);
  --accent_blue_alpha_015: rgba(15, 122, 245, 0.15);
  --accent_blue_alpha_020: rgba(15, 122, 245, 0.2);
  --accent_blue_alpha_025: rgba(15, 122, 245, 0.25);
  --accent_blue_alpha_030: rgba(15, 122, 245, 0.3);
  --accent_blue_alpha_040: rgba(15, 122, 245, 0.4);
  --accent_blue_alpha_050: rgba(15, 122, 245, 0.5);
  --accent_blue_alpha_060: rgba(15, 122, 245, 0.6);
  --accent_blue_alpha_070: rgba(15, 122, 245, 0.7);
  --accent_blue_alpha_080: rgba(15, 122, 245, 0.8);
  --accent_blue_alpha_090: rgba(15, 122, 245, 0.9);
  --bg_gray_web_0: #edf2f5;
  --bg_gray_web_1: #f2f7fa;
  --bg_gray_web_2: #f7fafc;
  --bg_gray_web_3: #fafbfc;
  --bg_white_web: #ffffff;
  --bg_white_web_alpha_090: rgba(255, 255, 255, 0.9);
  --mask_gray_030: rgba(0, 0, 0, 0.3);
  --mask_white_095: rgba(255, 255, 255, 0.95);
  --bg_segmented_control_option_selected: #ffffff;
  --bg_switch_grabber: #ffffff;
  --button_clearbutton_gray_xmark: #ffffff;
  --button_clearbutton_white_xmark: rgba(24, 36, 48, 0.6);
  --bg_panel_blur_stroke: #ffffff;
  --shadow_1: 0 2px 3px 0 rgba(19, 24, 29, 0.12);
  --shadow_2: 0 4px 6px 0 rgba(19, 24, 29, 0.12);
  --shadow_3: 0 6px 9px 0 rgba(19, 24, 29, 0.14);
  --shadow_4: 0 8px 12px 0 rgba(19, 24, 29, 0.14);
  --shadow_5: 0 10px 15px 0 rgba(19, 24, 29, 0.16);
  --shadow_6: 0 12px 18px 0 rgba(19, 24, 29, 0.16);
  --shadow_7: 0 14px 21px 0 rgba(19, 24, 29, 0.18);
  --shadow_8: 0 16px 24px 0 rgba(19, 24, 29, 0.18);
  --shadow_text: 0 1px 1px rgba(0, 0, 0, 0.7);
  --shadow_graph: 0 1px 1px 0 rgba(0, 0, 0, 0.6);
  --inner_shadow_mask: 0 6px 6px -6px rgba(19, 24, 29, 0.2) inset;
  --material_highlight_1: 0 1px 2px 0 rgba(255, 255, 255, 0.12) inset;
  --material_highlight_2: 0 1px 2px 0 rgba(255, 255, 255, 0.14) inset;
  --material_highlight_3: 0 2px 2px 0 rgba(255, 255, 255, 0.14) inset;
  --material_highlight_4: 0 2px 2px 0 rgba(255, 255, 255, 0.16) inset;
  --material_highlight_5: 0 2px 4px 0 rgba(255, 255, 255, 0.16) inset;
  --material_castshadow_1: 0 1px 2px 0 rgba(19, 24, 29, 0.32);
  --material_castshadow_2: 0 1px 2px 0 rgba(19, 24, 29, 0.34);
  --material_castshadow_3: 0 1px 2px 0 rgba(19, 24, 29, 0.36);
  --material_castshadow_4: 0 2px 3px 0 rgba(19, 24, 29, 0.38);
  --material_castshadow_5: 0 2px 4px 0 rgba(19, 24, 29, 0.4);
  --material_BlueButton_ExtraSmall: 0 1px 2px 0 var(--base_white_010) inset,
    0 1px 2px 0 var(--theme_alpha_025);
  --material_BlueButton_Small: 0 1px 2px 0 var(--base_white_015) inset,
    0 1px 2px 0 var(--theme_alpha_030);
  --material_BlueButton_Medium: 0 2px 2px 0 var(--base_white_015) inset,
    0 1px 2px 0 var(--theme_alpha_030);
  --material_BlueButton_Large: 0 2px 2px 0 var(--base_white_020) inset,
    0 2px 3px 0 var(--theme_alpha_040);
  --material_BlueButton_ExtraLarge: 0 2px 4px 0 var(--base_white_020) inset,
    0 2px 4px 0 var(--theme_alpha_040);
  --material_compose_default: 0 2px 4px 0 var(--base_white_020) inset,
    0 2px 4px 0 var(--accent_blue_alpha_040);
  --material_compose_white: 0 2px 4px 0
      var(--base_white_020, rgba(255, 255, 255, 0.2)) inset,
    0 2px 4px 0 rgba(19, 24, 29, 0.12);
  --material_panel: 0 1px 2px 0 #fff inset;
  --theme_primary: var(--accent_blue);
  --theme_darken_1: var(--accent_blue_darken_1);
  --theme_darken_2: var(--accent_blue_darken_2);
  --theme_darken_3: var(--accent_blue_darken_3);
  --theme_darken_4: var(--accent_blue_darken_4);
  --theme_darken_5: var(--accent_blue_darken_5);
  --theme_lighten_1: var(--accent_blue_lighten_1);
  --theme_lighten_2: var(--accent_blue_lighten_2);
  --theme_lighten_3: var(--accent_blue_lighten_3);
  --theme_lighten_3l: var(--accent_blue_lighten_3l);
  --theme_lighten_4: var(--accent_blue_lighten_4);
  --theme_lighten_4l: var(--accent_blue_lighten_4l);
  --theme_lighten_5: var(--accent_blue_lighten_5);
  --theme_alpha_005: var(--accent_blue_alpha_005);
  --theme_alpha_010: var(--accent_blue_alpha_010);
  --theme_alpha_015: var(--accent_blue_alpha_015);
  --theme_alpha_020: var(--accent_blue_alpha_020);
  --theme_alpha_025: var(--accent_blue_alpha_025);
  --theme_alpha_030: var(--accent_blue_alpha_030);
  --theme_alpha_040: var(--accent_blue_alpha_040);
  --theme_alpha_050: var(--accent_blue_alpha_050);
  --theme_alpha_060: var(--accent_blue_alpha_060);
  --theme_alpha_070: var(--accent_blue_alpha_070);
  --theme_alpha_080: var(--accent_blue_alpha_080);
  --theme_alpha_090: var(--accent_blue_alpha_090);
  --color-scroll-bar-bg: var(--base_gray_020);
  --color-scroll-bar-hover-bg: var(--base_gray_050);
  --color-scroll-bar-active-bg: var(--base_gray_060);
  font-size: 14px;
  line-height: 20px;
  color: var(--base_black);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,
    "Helvetica Neue", Helevetica, Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif;
  word-break: break-word;
  background: var(--bg_gray_web_0);
}

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  height: 100%;
  background-size: cover;
  width: 100%;
}

body,
button,
input,
select,
textarea {
  -webkit-text-size-adjust: none;
  outline: none;
}
body,
dd,
dl,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
legend,
p,
pre {
  margin: 0;
}

#mailMainApp {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  width: 100%;
}

.home-stage {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.home-theme-bg {
  --bg-img: none;
  --header-base-bg-img: none;
  --header-left-bg-img: none;
  --header-right-bg-img: none;
  --sidebar-bg-img: none;
  --page-bg-img: none;
  --page-right-bg-img: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  min-width: 820px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  background: var(--bg-img) repeat;
  background-size: 220px 60px;
  overflow: hidden;
}

.home-theme-bg .home-theme-bg-header {
  position: relative;
  height: 160px;
  background: var(--header-base-bg-img) repeat;
  background-size: auto 100%;
}

.home-theme-bg .home-theme-bg-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 400px;
  background: var(--header-left-bg-img) no-repeat;
  background-size: 100% 100%;
}

.home-theme-bg .home-theme-bg-header::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 420px;
  background: var(--header-right-bg-img) no-repeat;
  background-size: 100% 100%;
}

.home-theme-bg .home-theme-bg-body {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.home-theme-bg .home-theme-bg-sidebar {
  width: 220px;
  height: 100%;
  background: var(--sidebar-bg-img) no-repeat;
  background-size: 100% auto;
}

.home-theme-bg .home-theme-bg-route-content {
  flex-grow: 1;
  height: 100%;
  background: var(--page-bg-img) repeat;
}

.home-theme-bg .home-theme-bg-right {
  width: 16px;
  height: 100%;
  background: var(--page-right-bg-img) no-repeat;
  background-size: 100% auto;
}

.home-theme-bg.home-theme-bg-dark {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.home-theme-bg .home-theme-bg-header {
  position: relative;
  height: 160px;
  background: var(--header-base-bg-img) repeat;
  background-size: auto 100%;
}

.home-theme-bg .home-theme-bg-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 400px;
  background: var(--header-left-bg-img) no-repeat;
  background-size: 100% 100%;
}

.home-theme-bg .home-theme-bg-header::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 420px;
  background: var(--header-right-bg-img) no-repeat;
  background-size: 100% 100%;
}

.home-theme-bg .home-theme-bg-body {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.home-theme-bg .home-theme-bg-sidebar {
  width: 220px;
  height: 100%;
  background: var(--sidebar-bg-img) no-repeat;
  background-size: 100% auto;
}

.home-theme-bg .home-theme-bg-route-content {
  flex-grow: 1;
  height: 100%;
  background: var(--page-bg-img) repeat;
}

.home-theme-bg .home-theme-bg-right {
  width: 16px;
  height: 100%;
  background: var(--page-right-bg-img) no-repeat;
  background-size: 100% auto;
}

.home-header,
.home-body {
  min-width: 820px;
}

.home-header {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 60px;
  padding-right: 16px;
  box-sizing: border-box;
  overflow: hidden;
}

.home-body {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
}

.header-logo {
  --header-logo: url(assets/images/kkLogo.png);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 220px;
}
.header-logo-img {
  width: 220px;
  height: 60px;
  cursor: pointer;
}

.header-logo .header-logo-icon {
  cursor: pointer;
  width: 220px;
  height: 60px;
  background: var(--header-logo) no-repeat;
  background-size: 100% 100%;
}

.mail-lazy-search-wrap.is-placeholder {
  max-width: 500px;
}

.mail-lazy-search-wrap {
  --bg: var(--base_gray_005);
  --hover-bg: var(--base_gray_010);
  --placeholder-icon-color: var(--base_gray_040);
  --placeholder-text-color: var(--base_gray_020);
  background: var(--base_gray_005);
  font-size: 14px;
  line-height: 20px;
  cursor: text;
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  border-radius: 12px;
  height: 36px;
  max-width: 800px;
  min-width: 300px;
}

.home-sidebar-menu-left-btn {
  --icon-color: var(--base_gray_050);
  --hover-btn-bg: var(--base_gray_005);
  --active-btn-bg: var(--base_gray_010);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  width: 32px;
}

.home-sidebar-menu-left-btn .menu-down-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-color);

  height: 12px;
  border-radius: 2px;
  overflow: hidden;
}

.mail-lazy-search-wrap .input-left-placeholder {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.home-header .header-right {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding-left: 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.xmail-cmp-profile-btn {
  --bg: transparent;
  --hover-bg: var(--base_gray_005);
  --active-bg: var(--base_gray_010);
  --nick-color: var(--base_gray_080);
  --email-color: var(--base_gray_080);
  --text-shadow: none;
  flex-shrink: 99999;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  height: 40px;
  min-width: 130px;
  border-radius: 6px;
  background: var(--bg);
  padding: 0 8px;
  box-sizing: border-box;
}

.header-right:hover {
  background-color: rgba(20, 46, 77, 0.05);
}

.xmail-ui-avatar.ui-avatar-size32 {
  --size: 32px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}

.xmail-ui-avatar {
  --size: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  overflow: hidden;
  background-size: 100% 100%;
}

.xmail-ui-avatar.ui-avatar-border::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid var(--base_gray_005);
  box-sizing: border-box;
  border-radius: 50%;
}

.xmail-ui-avatar .ui-avatar-img {
  flex-grow: 1;
  height: 100%;
}

img {
  border: 0;
}

.xmail-cmp-profile-btn .profile-user-info {
  display: inline-flex;
  align-items: center;
  max-width: 426px;
  padding: 0 8px;
  box-sizing: border-box;
  overflow: hidden;
}

.xmail-cmp-profile-btn .user-nick,
.xmail-cmp-profile-btn .user-email {
  height: 24px;
  line-height: 24px;
  vertical-align: top;
}

.xmail-cmp-profile-btn .user-nick {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--nick-color);
  text-shadow: var(--text-shadow);
}

.xmail-cmp-profile-btn .user-email {
  font-size: 12px;
  line-height: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 99999;
  color: var(--email-color);
  text-shadow: var(--text-shadow);
}

.xmail-cmp-profile-btn .user-email::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--email-color);
  margin: 0 4px 3px 4px;
}

.xmail-cmp-profile-btn .down-icon {
  color: var(--email-color);
  margin-top: 2px;
}

.xmail-ui-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mail-lazy-search-wrap .placeholder-icon {
  margin-left: 10px;
  color: var(--placeholder-icon-color);
}

.mail-lazy-search-wrap .placeholder-text {
  color: var(--placeholder-text-color);
  margin-left: 8px;
}

.xmail-ui-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mail-lazy-search-wrap .input-left-placeholder {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.ui-avatar-img {
  width: 32px;
  height: 32px;
}

i {
  display: flex;
}

.home-header-setting-btn {
  --icon-color: var(--base_gray_050);
  --hover-bg: var(--base_gray_005);
  --active-bg: var(--base_gray_010);
  --theme-reddot-icon: url(https://res.wx.qq.com/t/webmail/webmail/res/static/images/mail/projects/web/containers/PageHeader/SettingBtn/red-dot-theme-default.4361d44.svg);
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 40px;
  height: 40px;
  color: var(--icon-color);
  border-radius: 6px;
  margin-left: 12px;
}

.xmail-ui-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-sidebar {
  --sidebar-menu-height: 32px;
  --sidebar-menu-margin-bottom: 2px;
  --feature-title-color: var(--base_gray_080);
  --sidebar-divider-color: var(--base_gray_007);
  --sidebar-menu-text-shadow: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  width: 220px;
  overflow: hidden;
}

.home-sidebar-compact {
  --sidebar-menu-height: 28px;
  --sidebar-menu-margin-bottom: 0;
}

.home-sidebar .sidebar-header {
  flex-shrink: 0;
  padding-bottom: 12px;
  margin: 0 12px;
  border-bottom: 1px solid transparent;
  box-sizing: border-box;
}

.home-sidebar-compose-btn {
  --base-bg: var(--accent_blue);
  --front-bg: transparent;
  --hover-front-bg: var(--base_white_005);
  --active-front-bg: var(--base_gray_010);
  --border-color: var(--accent_blue_darken_2);
  --color: var(--base_white_100);
  --icon-color: var(--base_white_100);
  --shadow: var(--material_compose_default);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 6px;
  background: var(--base-bg);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-color);
  box-sizing: border-box;
  overflow: hidden;
}

.home-sidebar-compose-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--front-bg);
}

.home-sidebar-compose-btn .compose-btn-icon-default,
.home-sidebar-compose-btn .compose-btn-icon-other {
  position: relative;
  color: var(--icon-color);
  margin-right: 4px;
}

.home-sidebar-compose-btn .compose-btn-text {
  font-size: 14px;
  line-height: 20px;
  position: relative;
  color: var(--color);
}

.xmail-ui-float-scroll {
  flex-grow: 1;
  position: relative;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.xmail-ui-float-scroll .ui-float-scroll-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-grow: 1;
  position: relative;
  overflow: auto;
}

.home-sidebar .sidebar-menus {
  padding: 0 12px 40px 12px;
  box-sizing: border-box;
}

.home-sidebar-draft-list {
  height: 0;
  opacity: 0;
  transition: height 0.3s ease-out, opacity 0.3s ease-out;
  overflow: hidden;
}

.home-sidebar-compact .home-sidebar-menu {
  font-size: 13px;
  line-height: 18px;
}

.home-sidebar-menu {
  --color: var(--base_gray_100);
  --bg: transparent;
  --hover-bg: var(--base_gray_005);
  --active-bg: var(--accent_blue_alpha_020);
  --right-btn-display: none;
  --total-display: inline-flex;
  --total-color: var(--base_gray_050);
  --border-color: transparent;
  --left-icon-color: var(--base_gray_080);
  --feature-icon-color: var(--base_gray_050);
  --lock-icon-color: var(--base_gray_030);
  --feature-icon-normal-display: inline-flex;
  --feature-icon-active-display: none;
  font-size: 14px;
  line-height: 20px;
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: var(--sidebar-menu-height);
  color: var(--color);
  background: var(--bg);
  padding: 0 2px 0 10px;
  border: 2px solid var(--border-color);
  box-sizing: border-box;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--sidebar-menu-margin-bottom);
}

.home-sidebar-menu:hover {
  background-color: rgb(201, 214, 217);
}

.xmail-ui-float-scroll {
  flex-grow: 1;
  position: relative;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.home-sidebar .sidebar-menus {
  padding: 0 12px 40px 12px;
  box-sizing: border-box;
}

.xmail-ui-float-scroll .ui-float-scroll-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-grow: 1;
  position: relative;
  overflow: auto;
}

.home-sidebar-menu .sidebar-menu-icon {
  color: var(--left-icon-color);
}

.xmail-ui-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-sidebar-menu .sidebar-menu-content {
  flex-grow: 1;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  position: absolute;
  left: 31px;
}

.home-sidebar-compact .home-sidebar-menu-right-btn {
  --size: 20px;
  --border-radius: 2px;
}
.home-sidebar-menu .sidebar-menu-right-btn {
  display: var(--right-btn-display);
  margin-left: 4px;
}

.xmail-ui-collapse {
  flex-shrink: 0;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease; /* 添加过渡效果，0.3s是过渡时间，ease是过渡曲线 */
}

.xmail-ui-collapse.show {
  height: 28px; /* 展开时的高度，这里假设为28px，根据实际情况调整 */
}

/* 应用 */
.home-sidebar-compact .sidebar-feature-title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  margin-top: 10px;
}

.home-sidebar .sidebar-feature-title {
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  height: 32px;
  color: var(--feature-title-color);
  text-shadow: var(--sidebar-menu-text-shadow);
  padding-left: 12px;
  margin-top: 18px;
}

.home-sidebar-menu .sidebar-menu-feature-normal-icon {
  display: var(--feature-icon-normal-display);
  color: var(--feature-icon-color);
}

.xmail-ui-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-sidebar-menu .sidebar-menu-red-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chrome_red_lighten_1);
  margin-right: 8px;
}

.home-middle {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-right: 16px;
}

.home-route-content {
  flex-grow: 1;
  position: relative;
  height: 100%;
  border-radius: 12px 12px 0 0;
  border: 1px solid var(--bg_white_web);
  box-sizing: border-box;
  overflow: hidden;
}

.home-route-content::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--bg_white_web);
}

.home-route-content .mail_app,
.home-route-content .vue2_app {
  position: relative;
  height: 100%;
}

.mail-list-page {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-grow: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.mail-list-page-toolbar {
  flex-shrink: 0;
  display: flex;
  height: 48px;
}

.mail-list-page-toolbar .left-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding-right: 12px;
  box-sizing: border-box;
}

.mail-list-page-toolbar.toolbar-2col .left-wrap {
  width: 274px;
}

.xmail-ui-checkbox.ui-checkbox-disabled {
  opacity: 0.3;
  --uncheck-bg: var(--base_gray_010);
  --uncheck-border: var(--base_gray_050);
}

.mail-list-page-toolbar .select-all {
  height: 100%;
  width: 44px;
  padding-left: 18px;
  box-sizing: border-box;
}

.xmail-ui-checkbox {
  --uncheck-bg: transparent;
  --uncheck-border: var(--base_gray_040);
  --checked-color: var(--theme_primary);
  flex-shrink: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.xmail-ui-checkbox .ui-checkbox-icon-uncheck {
  width: 16px;
  height: 16px;
  border: 1px solid var(--uncheck-border);
  border-radius: 2px;
  box-sizing: border-box;
  background: var(--uncheck-bg);
}

.mail-list-page-toolbar .toolbar-title {
  flex-grow: 1;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.mail-list-page-toolbar .toolbar-folder-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--base_gray_100);
}

.mail-list-page-filter-btn {
  --bg: transparent;
  --hover-bg: var(--base_gray_005);
  --active-bg: var(--base_gray_010);
  --text-color: var(--base_gray_100);
  --icon-color: var(--base_gray_080);
  display: inline-flex;
  overflow: hidden;
  cursor: pointer;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 4px;
  background: var(--bg);
  margin-left: 6px;
}

.mail-list-page-filter-btn .filter-btn-inner {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.mail-list-page-filter-btn .btn-icon {
  color: var(--icon-color);
}

.xmail-ui-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mail-list-page-toolbar .right-wrap {
  flex-grow: 1;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding-right: 16px;
  box-sizing: border-box;
}

.xmail-ui-ellipsis-toolbar {
  flex-grow: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

.xmail-ui-ellipsis-toolbar .ui-ellipsis-toolbar-btns {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.xmail-ui-btn.ui-btn-size32 {
  font-size: 14px;
  line-height: 20px;
  height: 32px;
  min-width: 32px;
  padding: 0 calc(8px - var(--border-width));
  border-radius: 4px;
}

.xmail-ui-btn.ui-btn-them-clear-gray {
  --border-color: var(--base_gray_010);
}

.xmail-ui-btn.ui-btn-border {
  --border-width: 1px;
}

.xmail-ui-btn {
  --base-bg: transparent;
  --front-bg: transparent;
  --hover-front-bg: var(--base_gray_005);
  --active-front-bg: var(--base_gray_010);
  --color: var(--base_gray_100);
  --icon-color: var(--base_gray_080);
  --border-width: 0px;
  --border-color: transparent;
  --icon-margin: 4px;
  --shadow: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: var(--color);
  border: var(--border-width) solid var(--border-color);
  box-sizing: border-box;
  background: var(--base-bg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.xmail-ui-btn .ui-btn-icon {
  position: relative;
  color: var(--icon-color);
  margin-right: var(--icon-margin);
}

.xmail-ui-btn .ui-btn-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.xmail-ui-ellipsis-toolbar .ui-ellipsis-toolbar-more {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  width: 0;
  overflow: hidden;
}

.xmail-ui-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--front-bg);
}

.mail-list-page .mail-list-page-body {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
  min-height: 1000px;
}

.mail-list-page-items {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 354px;
}

.mail-list-page-tips {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 24px;
  min-height: 1000px;
}

.mail-list-page-tips .empty-tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--base_gray_080);
}

.home-route-content .mail_app,
.home-route-content .vue2_app {
  position: relative;
  height: 100%;
}

.home-middle {
  margin-top: 50px; /* 与顶部导航栏高度一致 */
  margin-left: 210px; /* 与左侧侧边栏宽度一致 */
  flex-grow: 1;
  overflow-y: auto;
}

/* 顶部导航栏固定 */
.home-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px; /* 根据实际情况调整高度 */
  background-color: #fff; /* 根据实际情况调整背景颜色 */
  z-index: 100; /* 确保导航栏在最上层 */
}
.home-sidebar-fixed {
  position: fixed;
  top: 60px; /* 与顶部导航栏高度一致 */
  left: 0;
  width: 220px; /* 根据实际情况调整宽度 */
  height: calc(100vh - 60px); /* 减去顶部导航栏的高度 */
  overflow-y: auto; /* 如果内容超出高度，显示滚动条 */
  z-index: 99; /* 确保侧边栏在中间内容之上 */
}

.home-container {
  display: flex;
  height: 100vh;
}

.logout-menu {
  position: absolute;
  width: 100px;
  top: 50px;
  right: 50px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.logout-item {
  text-align: center;
  padding: 10px 20px;
  cursor: pointer;
}

.logout-item:hover {
  background-color: #f5f5f5;
}
</style>
